/* eslint-disable global-require */
import React, { FC, useState, useEffect } from "react";
import "./style.css";

const Glassmorphism: FC = function Glassmorphism() {
  const [imgs, setImgs] = useState<any[]>([]);
  useEffect(() => {
    console.log("setImgs");
    setTimeout(() => {
      setImgs([require("@assets/images/photo-1.png"), require("@assets/images/photo-2.png")]);
    }, 1000 * 2);
  }, []);
  return (
    <div className="glassmorphism-warp">
      <h2>毛玻璃效果</h2>
      {imgs.map((item) => (
        <GlassmorphismCard key={item} src={item} />
      ))}
    </div>
  );
};
interface GlassmorphismCardInterface {
  src: any;
}
const GlassmorphismCard: FC<GlassmorphismCardInterface> = function GlassmorphismCard(props) {
  const { src } = props;
  return (
    <div className="glassmorphism-card">
      <div className="background-content">
        <div className="background-content-image" style={{ backgroundImage: `url(${src})` }} />
        <img src={src} alt="" />
      </div>
    </div>
  );
};
export default Glassmorphism;
